<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Rate 评分</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看所选数据</el-button>
	</el-affix>
	
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。 三个等级所对应的颜色用 colors 属性设置，而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。</p>
	<div class="demo-rate-block">
		<span class="demonstration">默认：</span>
		<el-rate v-model="value1"></el-rate>
	</div>
	<div class="demo-rate-block">
		<span class="demonstration">不同层次的颜色：</span>
		<el-rate v-model="value2" :colors="colors"></el-rate>
	</div>
	<div class="demo-rate-block">
		<span class="demonstration">10星：</span>
		<el-rate v-model="value2" :colors="colors" :max="maxValue"></el-rate>
	</div>
	
	<el-divider content-position="left">尺寸</el-divider><!-- =============================================================== -->
	<p class="desc">【没有生效】</p>
	<el-rate v-model="value" size="large"></el-rate>
	<br />
	<el-rate v-model="value1"></el-rate>
	<br />
	<el-rate v-model="value2" size="small"></el-rate>
	
	<el-divider content-position="left">允许半星</el-divider><!-- =============================================================== -->
	<p class="desc">属性 allow-half 允许出现半星</p>
	<el-rate v-model="value" allow-half></el-rate>
	
	
	<el-divider content-position="left">辅助文字</el-divider><!-- =============================================================== -->
	<p class="desc">用辅助文字直接地表达对应分数</p>
	<p class="desc">为组件设置 show-text 属性会在右侧显示辅助文字。 通过设置 texts 可以为每一个分值指定对应的辅助文字。 texts 为一个数组，长度应等于最大值 max。</p>
	<el-rate v-model="value" :texts="arr_text" show-text></el-rate>
	<br>
	<el-rate v-model="value" :texts="arr_text" show-text allow-half></el-rate>
	
	<el-divider content-position="left">其它 icon</el-divider><!-- =============================================================== -->
	<p class="desc">当有多层评价时，可以用不同类型的 icon 区分评分层级</p>
	<p class="desc">设置icon-classes属性可以自定义不同分段的图标。 若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。 本例还使用 void-icon-class 指定了未选中时的图标类名。</p>
	<el-rate v-model="value" :icons="icons" :void-icon="ChatRound" :colors="['#409eff', '#67c23a', '#FF9900']"></el-rate>
	
	<el-divider content-position="left">只读</el-divider><!-- =============================================================== -->
	<p class="desc">只读的评分用来展示分数， 允许出现半星</p>
	<p class="desc">为组件设置 disabled 属性表示组件为只读，支持小数分值。 此时若设置 show-score，则会在右侧显示目前的分值。 可以提供 score-template 作为显示模板，模板为一个包含了 {value} 的字符串，{value} 会被解析为分值。</p>
	<el-rate v-model="ov" disabled show-score text-color="#ff9900" score-template="{value} 分"></el-rate>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			maxValue: 10,
			ov: 3.7,
			value: null,
			value1: null,
			value2: null,
			// colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
			colors: {1:'#333333', 2: '#99A9BF', 3: '#82904e', 4: '#c89621', 5: '#F7BA2A' },
			arr_text: ['极差', '较差', '一般', '较好', '非常好'],
			ChatRound: ElementPlusIconsVue.ChatRound,
			icons: [ElementPlusIconsVue.ChatRound, ElementPlusIconsVue.ChatLineRound, ElementPlusIconsVue.ChatDotRound], // same as { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }
		}
	},
	methods:{
		handleChange(item){
			console.log(item)
		},
		showValue(){
			console.log(this.$data.value, this.$data.value1, this.$data.value2);
		},
	},
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
